<template>
  <a-modal v-model:visible="_d.visible" title="更改密码" 
  	okText="确认"
  	cancelText="取消"
  	@ok="handleOk">
    <a-form :label-col="{style: {width: '7em'}}">
    	<a-form-item label="登录用户名" v-bind="validateInfos.usercode">
				<a-input class="userName" v-model:value="_d.form.usercode" placeholder="请输入" disabled></a-input>
		  </a-form-item>
			<a-form-item label="原密码" v-bind="validateInfos.passwordOld">
				<a-input-password v-model:value="_d.form.passwordOld" placeholder="请输入"></a-input-password>
	   	</a-form-item>
    	<a-form-item label="新密码" v-bind="validateInfos.passwordNew">
				<a-input-password v-model:value="_d.form.passwordNew" placeholder="请输入"></a-input-password>
	   	</a-form-item>
		  <a-form-item label="确认新密码" v-bind="validateInfos.passwordNew2">
				<a-input-password v-model:value="_d.form.passwordNew2" placeholder="请输入"></a-input-password>
		  </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue'
	import {Form, notification} from "ant-design-vue";

	import {ApiPost} from "@/api/request.js";
	import {Verify} from "@/utils/Tools.js";

	import {useRouter} from "vue-router";
	import {useUserStore} from '@/store/userStore';

	const router = useRouter();
	const userStore = useUserStore();

	const _d = reactive({
		visible: false,

		form: {
			usercode: userStore.userinfo?.code,
			passwordOld: '',
			passwordNew: '',
			passwordNew2: '',
		},

		rules: {
			passwordOld: [
		 		{ required: true, message: '请输入原密码' },
				{ pattern: Verify.password, message: '密码为6-20位的数字字母组成'}
		 	],
			passwordNew: [
		 		{ required: true, message: '请输入新密码' },
				{ pattern: Verify.password, message: '密码为6-20位的数字字母组成'}
		 	],
			 passwordNew2: [
		 		{ required: true, message: '请确认新密码' },
		 		{ validator: (_rule, value) => {
		 			if(value !== _d.form.passwordNew) {
		 				return Promise.reject('两次新密码输入不一致');
		 			}
					return Promise.resolve();
		 		} },
		 	],
		},
	})

	const {resetFields, validate, validateInfos} = Form.useForm(_d.form, _d.rules);

	function open() {
		_d.visible = true;
	}

	function handleOk() {
		validate().then(() => {
			let params = {
				..._d.form
			}
			ApiPost("/Web/usersetpsssword", params).then(res => {
				notification.success({
					message: '提示',
					description: '修改成功，请重新登录'
				});
				router.push({
					path: '/login'
				})
			})
		})
	}

	defineExpose({
		open
	})

</script>

<style lang="less" scoped>
.userName {
	color: #333;
}
</style>